// Name:                      Close
//
// Description:               Define style close button
//
// Component:                `.am-close`
//
// Modifiers:                `.am-close-alt`
//                           `.am-close-spin`
//
// Uses:
//
// Used by:
//
// =============================================================================

/* ==========================================================================
   Component: Close
 ============================================================================ */

.@{ns}close {
    display: inline-block;
    text-align: center;
    width: 24px;
    // height: 24px;
    font-size: 20px;
    font-weight: @close-font-weight;
    line-height: 24px;
    color: @close-color;
    text-shadow: @close-text-shadow;
    opacity: .2;
    transition: all .3s;
    &:hover, &:focus {
        color: @close-color;
        text-decoration: none;
        cursor: pointer;
        opacity: .5;
        outline: none;
    }
    &[class*="@{ns}icon-"] {
        font-size: 16px;
    }
    .hook-close;
}

// Adjust code style for SASS converter
// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
button.@{ns}close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    /* Needed for Sarari */
    border: 0;
    -webkit-appearance: none;
}

a.@{ns}close:hover {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}


/* Modifiers
 ============================================================================ */

.@{ns}close-alt {
    border-radius: 50%;
    background: @close-alt-background;
    opacity: 0.7;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); // 0 0 6px rgba(0, 0, 0, 0.3);
    .hook-close-alt;
    /* Hover */
    &:hover, &:focus {
        opacity: 1;
    }
}

.@{ns}close-spin {
    &:hover {
        transform: rotate(360deg);
    }
}

// Hooks
// =============================================================================
.hook-close() {}

.hook-close-alt() {}
